vanilla js [CPU ToyProj] 니꼴라스 크롬 앱 만들기 ➕ 게임도 만들 수 있다. ➕ socket.io로 채팅 기능을 구현할 수 있다. ✔ 변수를 통해서 변하는 변수인지 변하지 않는 변수인지 알 수 있다. ✔ property를 가진 데이터를 정리할 수 있다. ✔ object 안에 function을 넣어줄 수 있다. 💚 The Document Object & HTML in JavaScript document.title 제목을 가져올 수 있다. 1.... JavaScriptvanilla jsjs도전CSSfrontend동아리htmlCSS [Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS 20 web projects by VanillaJS - 1,2,3 모던 자바스크립트 책으로 이론을 공부하며, 이론만 공부하는것보다 이걸 활용하면 학습효과가 배가 되지않을까라는 생각중에 udemy에서 이 강의를 발견하였고 현재 수강중에 있다. cf) substring(a,b) : charAt은 문자 하나를 읽어내지만 substring 문자열을 읽어낸다. substring(1,3)- 1번 인덱스부터 3번인덱스까지의 문자열을 불러옴 3) slice() slice... JavaScriptvanilla jsJavaScript [Vanilla JS] ES6 문법 - 3 - 먼저 변수의 값을 초기화하고, i++ 증감문 때문에 변수가 1씩 증가하게되고, i<5; i가 5보다 작을 때까지 증가하며, 값이 같거나 크면 반복문을 빠져나오게 됩니다. (i<=5;가 되면 같을 때까지 증가하기 때문에 0 1 2 3 4 5가 출력됩니다.) 배열 안에 있는 아이템들의 데이터 타입은 상관없습니다. for of문은 배열 안에 있는 아이템들을 변수로 가져올 수 있습니다. 배열 안에 ... vanilla jsvanilla js 20 web projects by VanillaJS - 5, 6 이후에 좌측에 있는 버튼들을 통해 유저 추가, 유저의 돈 2배 증가, 백만장자만 보기, 분류, 계산 각각 map, filter, sort, reduce 함수를 사용하여 구현하였다. 3) 백만장자만 표시 1) async/await await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용 가능하며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해준다. await 키워드를 ... JavaScriptvanilla jsJavaScript [ Vanilla JS ] Flux 패턴으로 상태 관리하기 ( feat. store ) React에서 사용되는 상태관리 패턴이다. ( Redux, Context API ) 핵심은 동작이 단방향으로 흐르다. Action 상태를 변경하는 메소드. ( action key + payload ) Dispatcher action을 store에게 전달하는 역할. Model(Store) 상태을 관리하는 역할. View 화면을 렌더링하는 역할. Store core reducer Store을 생... 상태관리storeFluxvanilla jsFlux [TIL] 0317 WaffleCard Refactoring CardList Animation 카드 너비나 갯수가 달라질 때도 속도가 유지되도록 해야하는데 그러려면 targetDom의 scrollWidth가 달라질 때마다 useInterval이 재실행되야한다 (delay가 달라지니까) scrollWidth을 useInterval의 타이머 실행 의존성으로 걸어줬지만 문제가 해결되지 않음... Vanilla JS ... vanilla jsWaffleCard RefactoringWaffleCard Refactoring [vanilla JS] getting the elements 1. document.getElementById("id 이름") --> id로 element(요소)를 가져올 수 있다. 💻EX 2. document.getElementsByClassName("class 이름"), document.getElementsByTagName("tag" 이름) ⅰ) class/tag로 요소를 가져올 수 있다 ⅱ) 배열 값을 반환한다. ⅲ) 많은 요소들을 불러와야 할 때... 노마드코더vanilla jsjsjs
[CPU ToyProj] 니꼴라스 크롬 앱 만들기 ➕ 게임도 만들 수 있다. ➕ socket.io로 채팅 기능을 구현할 수 있다. ✔ 변수를 통해서 변하는 변수인지 변하지 않는 변수인지 알 수 있다. ✔ property를 가진 데이터를 정리할 수 있다. ✔ object 안에 function을 넣어줄 수 있다. 💚 The Document Object & HTML in JavaScript document.title 제목을 가져올 수 있다. 1.... JavaScriptvanilla jsjs도전CSSfrontend동아리htmlCSS [Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS 20 web projects by VanillaJS - 1,2,3 모던 자바스크립트 책으로 이론을 공부하며, 이론만 공부하는것보다 이걸 활용하면 학습효과가 배가 되지않을까라는 생각중에 udemy에서 이 강의를 발견하였고 현재 수강중에 있다. cf) substring(a,b) : charAt은 문자 하나를 읽어내지만 substring 문자열을 읽어낸다. substring(1,3)- 1번 인덱스부터 3번인덱스까지의 문자열을 불러옴 3) slice() slice... JavaScriptvanilla jsJavaScript [Vanilla JS] ES6 문법 - 3 - 먼저 변수의 값을 초기화하고, i++ 증감문 때문에 변수가 1씩 증가하게되고, i<5; i가 5보다 작을 때까지 증가하며, 값이 같거나 크면 반복문을 빠져나오게 됩니다. (i<=5;가 되면 같을 때까지 증가하기 때문에 0 1 2 3 4 5가 출력됩니다.) 배열 안에 있는 아이템들의 데이터 타입은 상관없습니다. for of문은 배열 안에 있는 아이템들을 변수로 가져올 수 있습니다. 배열 안에 ... vanilla jsvanilla js 20 web projects by VanillaJS - 5, 6 이후에 좌측에 있는 버튼들을 통해 유저 추가, 유저의 돈 2배 증가, 백만장자만 보기, 분류, 계산 각각 map, filter, sort, reduce 함수를 사용하여 구현하였다. 3) 백만장자만 표시 1) async/await await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용 가능하며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해준다. await 키워드를 ... JavaScriptvanilla jsJavaScript [ Vanilla JS ] Flux 패턴으로 상태 관리하기 ( feat. store ) React에서 사용되는 상태관리 패턴이다. ( Redux, Context API ) 핵심은 동작이 단방향으로 흐르다. Action 상태를 변경하는 메소드. ( action key + payload ) Dispatcher action을 store에게 전달하는 역할. Model(Store) 상태을 관리하는 역할. View 화면을 렌더링하는 역할. Store core reducer Store을 생... 상태관리storeFluxvanilla jsFlux [TIL] 0317 WaffleCard Refactoring CardList Animation 카드 너비나 갯수가 달라질 때도 속도가 유지되도록 해야하는데 그러려면 targetDom의 scrollWidth가 달라질 때마다 useInterval이 재실행되야한다 (delay가 달라지니까) scrollWidth을 useInterval의 타이머 실행 의존성으로 걸어줬지만 문제가 해결되지 않음... Vanilla JS ... vanilla jsWaffleCard RefactoringWaffleCard Refactoring [vanilla JS] getting the elements 1. document.getElementById("id 이름") --> id로 element(요소)를 가져올 수 있다. 💻EX 2. document.getElementsByClassName("class 이름"), document.getElementsByTagName("tag" 이름) ⅰ) class/tag로 요소를 가져올 수 있다 ⅱ) 배열 값을 반환한다. ⅲ) 많은 요소들을 불러와야 할 때... 노마드코더vanilla jsjsjs